<template>
  <view class="box">
    <view class="box_input">
      <view class="input_activation">
        <input placeholder="请输入10位卡密" @input="inputSecret" maxlength="10" />
        <image src="../../static/iconmaterial/scan.png" class="image_scan" @click="sanCode" />
      </view>
    </view>
    <view class="button_group">
      <button @click="active">立即激活</button>
      <button class="button_one" @click="myCardBoard">我的卡包</button>
    </view>
    <view class="text_content">
      <view class="title">
        温馨提示
      </view>
      <text>
        1.请在收到权益卡后在激活有效期内激活，逾期未激活权益卡将失效作废<br>
        2.权益使用有效期为激活后页面显示起始日期和截止日期<br>
        3.权益详细说明以激活平台页面显示为准<br>
      </text>
    </view>
    <view style="height: 500rpx;"></view>
    <view style="display: flex;justify-content: center;align-items: center;font-size: 28rpx;color: rgba(130, 130, 130, 1);" @click="gotoback">退出登录</view>
  </view>
</template>
<script setup>
  import {
    onShow
  } from '@dcloudio/uni-app';
  import {
    onBeforeMount,
    onMounted,
    ref
  } from 'vue';
  import {
    activateCardPassword
  } from '../../request/active.js'
  import {
      signOut
    } from "../../request/login.js"
  import wx from "weixin-js-sdk"
  const cardSecret = ref(null)
  const activeDetail = ref({})
  onMounted(() => {

  })

  function sanCode() {
    console.log("扫码")
    uni.navigateTo({
      url: "/pages/mine/scanCode"
    })
  }

  function inputSecret(event) {
    cardSecret.value = event.detail.value
  }

  function active() {
    if (!cardSecret.value) {
      showMessage("请输入卡密")
      return
    }
    if (cardSecret.value.length !== 10) {
      showMessage("请输入10位卡密")
      return
    }
    activateCardPassword(cardSecret.value).then(res => {
      if (res.code === 200) {
        activeDetail.value = res.data
        uni.showModal({
          title: "通知",
          content: `恭喜您激活${res.data.productName},有效期${formatDate(new Date(res.data.startTime))}至${formatDate(new Date(res.data.expiredTime))}`,
          showCancel: true,
          cancelText: "取消",
          confirmText: "去使用",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/mine/cardbord"
              })
            }
          }
        })
      } else {
        showMessage(res.message)
      }
    }).catch(err => {
      showMessage(err.message)
    })
  }
  function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }
  function myCardBoard() {
    uni.navigateTo({
      url: "/pages/mine/cardbord"
    })
  }

  function showMessage(message) {
    uni.showToast({
      title: message,
      icon: "none"
    })
  }
  function gotoback(){
    uni.reLaunch({
      url: "/pages/login/login",
      success() {
        uni.clearStorageSync()
      }
    })
    // window.history.replaceState(null,null,'/')
    signOut().then(res => {
      if (res.code === 200) {
        // uni.showToast({
        //     title: res.message,
        //     icon:"none"
        //   })
      } else {
        // uni.showToast({
        //   title: res.message,
        //   icon:"none"
        // })
      }

    }).catch(err => {
      uni.showToast({
        title: err.message
      })
    })

  }
</script>



<style>
  .box {}

  .box_input {
    height: 220rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box_input input {
    text-align: left;
    flex: 1
  }

  .input_activation {
    width: 650rpx;
    height: 110rpx;
    margin: 0 auto;
    opacity: 1;
    border-radius: 20rpx;
    background: rgba(242, 242, 242, 1);
    border: 1rpx solid rgba(240, 240, 240, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25rpx;
  }

  .box_input .image_scan {
    height: 80rpx;
    width: 80rpx;
  }

  .box button {
    width: 610rpx;
    height: 90rpx;
    opacity: 1;
    border-radius: 200rpx;
    background: rgba(19, 136, 255, 1);
    margin: 0 auto;
    font-size: 36rpx;
    font-weight: 500;
    letter-spacing: 0rpx;
    line-height: 52rpx;
    color: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box .button_one {
    border: 2rpx solid rgba(19, 136, 255, 1);
    background: rgba(255, 255, 255, 1.0);
    color: rgba(19, 136, 255, 1);
  }

  .box .button_group {
    display: flex;
    flex-direction: column;
    /* 垂直排列 */
    gap: 35rpx;
    /* 设置按钮之间的间隔为 30rpx */
  }

  .text_content {
    width: 630rpx;
    margin: 0 auto;
    margin-top: 80rpx;


  }

  .text_content .title {
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 46rpx;
    color: rgba(0, 0, 0, 1);
  }

  .text_content text {
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 1rpx;
    line-height: 40rpx;
    color: rgba(130, 130, 130, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15rpx;
  }
</style>
